"use client"

import { useState, useRef, useCallback } from "react"
import { DraggableWindow } from "@/components/paint/draggable-window"
import { Canvas } from "@/components/paint/canvas"
import { Toolbar } from "@/components/paint/toolbar"
import { toast } from "sonner"

type Tool = "pencil" | "eraser" | "fill" | "text" | "select" | "shape"
type ShapeType = "rectangle" | "circle" | "line" | "none"

export default function Home() {
  const [activeTool, setActiveTool] = useState<Tool>("pencil")
  const [activeColor, setActiveColor] = useState("#000000")
  const [brushSize, setBrushSize] = useState(5)
  const [activeShape, setActiveShape] = useState<ShapeType>("rectangle")
  
  const canvasRef = useRef<HTMLCanvasElement>(null)
  
  // Undo function
  const handleUndo = useCallback(() => {
    // This would be implemented in the Canvas component
    toast("Undo action", {
      description: "This feature would undo the last action",
    })
  }, [])
  
  // Redo function
  const handleRedo = useCallback(() => {
    // This would be implemented in the Canvas component
    toast("Redo action", {
      description: "This feature would redo the last undone action",
    })
  }, [])
  
  // Save function
  const handleSave = useCallback(() => {
    if (!canvasRef.current) return
    
    try {
      // Create a temporary link element
      const link = document.createElement("a")
      link.download = "paint-drawing.png"
      
      // Convert canvas to data URL
      link.href = canvasRef.current.toDataURL("image/png")
      
      // Trigger download
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
      toast("Image saved", {
        description: "Your drawing has been saved as paint-drawing.png",
      })
    } catch (error) {
      toast("Error saving image", {
        description: "There was an error saving your drawing",
      })
    }
  }, [])
  
  // Open function
  const handleOpen = useCallback(() => {
    // This would open a file dialog and load an image onto the canvas
    toast("Open image", {
      description: "This feature would allow loading an image from your device",
    })
  }, [])
  
  // Handle window close
  const handleClose = useCallback(() => {
    toast("Close Paint", {
      description: "In a real application, this would close the Paint window",
    })
  }, [])
  
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-muted">
      <DraggableWindow
        title="MS Paint Clone"
        onClose={handleClose}
        defaultPosition={{ x: 50, y: 50 }}
      >
        <div className="flex flex-col h-full">
          <Toolbar
            activeTool={activeTool}
            setActiveTool={setActiveTool}
            activeColor={activeColor}
            setActiveColor={setActiveColor}
            brushSize={brushSize}
            setBrushSize={setBrushSize}
            activeShape={activeShape}
            setActiveShape={setActiveShape}
            onUndo={handleUndo}
            onRedo={handleRedo}
            onSave={handleSave}
            onOpen={handleOpen}
          />
          <Canvas
            activeTool={activeTool}
            activeColor={activeColor}
            brushSize={brushSize}
            activeShape={activeShape}
            canvasRef={canvasRef}
          />
        </div>
      </DraggableWindow>
    </main>
  )
}